import { defineConfig } from "@rspack/cli";
import { rspack } from "@rspack/core";
import RefreshPlugin from "@rspack/plugin-react-refresh";
import path from "path";

const isDev = process.env.NODE_ENV === "development";
const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];

export default defineConfig({
	// context: __dirname,
	entry: {
		main: "./src/main.tsx"
	},
	resolve: {
		alias: {
		},
		extensions: ["...", ".ts", ".tsx", ".jsx", ".less", ".css", ".scss"]
	},
	module: {
		rules: [
			{
				test: /\.svg$/,
				type: "asset"
			},
			{
				test: /\.less$/,
				use: [
					{
						loader: 'less-loader',
					},
				],
				type: 'css',
			},
			{
				test: /\.(js?|jsx?|ts?|tsx?)$/,
				exclude: [/node_modules/],
				use: [
					{
						loader: "builtin:swc-loader",
						options: {
							jsc: {
								parser: {
									syntax: "typescript",
									tsx: true,
								},
								transform: {
									react: {
										runtime: "automatic",
										development: true,
										refresh: true
									}
								}
							},
						}
					},
					{
						loader: path.resolve(__dirname, './swc-import-loader/index.cjs'),
						options: {
							rspackExperiments: {
								import: [
									{
										libraryName: '@fexd/mobile',
										libraryDirectory: 'es/exports',
										camel2DashComponentName: false,
										// style: 'css'
										style: (path,name) => {
											console.log(333333333)
											console.log(path)
											console.log(name)
											return `${path}/style.css`
										},
									},
									{
										libraryName: 'mooli-mobile',
										libraryDirectory: 'es',
										// style: 'css'
										style: (name) => `${name}/style/index.css`,
									},
									{
										camel2DashComponentName: false,
										libraryName: 'ahooks',
										libraryDirectory: 'es',
									}
								]
							}
						}
					},
				],
				type: "javascript/auto"
			}
		]
	},
	plugins: [
		new rspack.HtmlRspackPlugin({
			template: "./index.html"
		}),
		isDev ? new RefreshPlugin() : null,
	].filter(Boolean),
	experiments: {
		css: true,
	},
	optimization: {
		minimizer: [
			new rspack.SwcJsMinimizerRspackPlugin(),
			new rspack.LightningCssMinimizerRspackPlugin({
				minimizerOptions: { targets }
			})
		],
		sideEffects: false
	}
});
